/*右边*/
.right {
    width: calc(100vw - 20px);
    height: calc(100vh - 20px);
    background-color: rgb(176, 196, 222);
}

/*查询*/
.right .query {
    display: flex;
    justify-content: flex-start;
    height: 65px;
}

.right .query > div {
    display: flex;
    justify-content: flex-start;
    margin: 20px 10px;
}

.right .query input {
    width: 100px;
    height: 25px;
    border: 0;
}

.right .query input > div > div:nth-child(2) {
    border: 1px solid rgba(0, 0, 255, 0.8);
}

.right .query select {
    width: 70px;
    height: 25px;
}

.right .query .query-button {
    background-color: cornflowerblue;
    cursor: pointer;
}

/*爱好*/
.right .hobby {
    display: flex;
    justify-content: flex-start;
    height: 30px;
    margin: -5px 5px 5px 10px;
}

.right .hobby > div:nth-child(2) {
    margin: 0 5px;
}

.right .hobby > div input {
    margin: 0 5px;
}

/*表样式
 table-layout: fixed;(允许设置列宽,通过th)  默认为 table-layout: automatic 默认每一列列宽均分(不可设置列宽)
*/
.right table {
    width: 100%;
    height: calc(100vh - 300px);
}

.right tbody, thead {
    border: 0;
    padding: 0;
    text-align: left;
}

.right thead {
    display: block;
}

.right tbody {
    display: block;
    height: 350px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.right thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.right tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.right thead {
    width: calc(100% - 1em)
}

.right thead, th {
    height: 35px;
    white-space: nowrap;
    overflow: hidden;
}

/*表格内容*/
.right th {
    width: 15%;
}

.right td {
    padding: 0;
    height: 20px;
    width: 15%;
    white-space: nowrap;
    overflow: hidden;
}

.right td:first-child, th:first-child {
    width: 30px;
}

.right td:last-child, th:last-child {
    text-align: center;
    width: 200px;
}

/*签到状态*/
.right td:nth-child(7), th:nth-child(7) {
    text-align: center;
    width: 300px;
}

.right .list tr:nth-child(odd) {
    background-color: deepskyblue;
}

.right .list tr:nth-child(even) {
    background-color: #87CEEB;
}

.right .add{
    background-color: dodgerblue;
    cursor: pointer;
}

.right .update {
    background-color: deepskyblue;
    cursor: pointer;
}

.right .delete {
    background-color: red;
    cursor: pointer;
}

/*设置图片宽高*/
.right img {
    width: 30px;
    height: 30px;
}

/*隐藏*/
.hidden{
    display: none;
}

/*显示*/
.show{
    display: block;
}